import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Button, Card, Spin, Empty, Descriptions, message } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import styles from './index.module.scss'
import { getVideoByIdApi, type VideoItem } from '../../services/api'

const VideoDetail = () => {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const [video, setVideo] = useState<VideoItem | null>(null)
  const [loading, setLoading] = useState(true)

  // 从后端 API 获取视频详情
  useEffect(() => {
    if (!id) return

    const fetchVideo = async () => {
      try {
        setLoading(true)
        const response = await getVideoByIdApi(id)
        if (response.data) {
          setVideo(response.data)
        } else {
          setVideo(null)
        }
      } catch (error) {
        console.error('获取视频详情失败:', error)
        message.error(error instanceof Error ? error.message : '获取视频详情失败')
        setVideo(null)
      } finally {
        setLoading(false)
      }
    }

    fetchVideo()
  }, [id])

  if (loading) {
    return (
      <div className={styles.loadingContainer}>
        <Spin size="large" tip="加载中..." />
      </div>
    )
  }

  if (!video) {
    return (
      <div className={styles.videoDetailContainer}>
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={() => navigate('/video-list')}
          style={{ marginBottom: 24 }}
        >
          返回列表
        </Button>
        <Empty description="视频不存在" />
      </div>
    )
  }

  return (
    <div className={styles.videoDetailContainer}>
      <Button
        icon={<ArrowLeftOutlined />}
        onClick={() => navigate('/video-list')}
        className={styles.backButton}
      >
        返回列表
      </Button>

      <Card className={styles.videoCard}>
        <h1 className={styles.videoTitle}>{video.title}</h1>
        
        <div className={styles.videoPlayerContainer}>
          <video
            className={styles.videoPlayer}
            controls
            poster={video.thumbnail}
            preload="metadata"
          >
            <source src={video.videoUrl} type="video/mp4" />
            您的浏览器不支持视频播放。
          </video>
        </div>

        <Descriptions
          bordered
          column={{ xs: 1, sm: 2, md: 3 }}
          className={styles.videoInfo}
        >
          {video.duration && (
            <Descriptions.Item label="时长">
              {video.duration}
            </Descriptions.Item>
          )}
          {video.views !== undefined && (
            <Descriptions.Item label="播放量">
              {video.views.toLocaleString()}
            </Descriptions.Item>
          )}
          {video.uploadDate && (
            <Descriptions.Item label="上传日期">
              {video.uploadDate}
            </Descriptions.Item>
          )}
        </Descriptions>

        {video.description && (
          <div className={styles.videoDescription}>
            <h3>视频简介</h3>
            <p>{video.description}</p>
          </div>
        )}
      </Card>
    </div>
  )
}

export default VideoDetail

